<template>
  <div class="register">
    <div class="content">
      <div class="box">
        <div class="list">
          <div class="left">
            <div class="time">
              {{date+ '  '}}{{time}}
            </div>
            <!--            <div class="logo">-->
            <img src="@/assets/img/login/logo.jpeg" alt="">
            <!--            </div>-->
            <!--            <h2 class="title">在线点餐</h2>-->
          </div>
          <div class="right">
            <div class="form">
              <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="用户名">
                  <a-input v-model:value="username" placeholder="请输入用户名" />
                </a-form-item>
                <a-form-item label="密码">
                  <a-input v-model:value="password" placeholder="请输入密码" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
                  <a-button type="primary" @click.prevent="onSubmit">登录</a-button>
                  <a-button style="margin-left: 10px" @click="reset">重置</a-button>
                  <!--                  <a-button style="margin-left: 10px" @click="reset">用户注册</a-button>-->
                </a-form-item>
              </a-form>
            </div>
          </div>
        </div>
        <div class="bottom">
          还没有账号?
          <span style="font-size: 18px; color: red" @click="toRegister">立即注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted, onUnmounted, reactive, toRefs} from "vue";
import {dateFormat} from "../../untils/date";

export default defineComponent({
  name: "register",
  setup() {
    const state = reactive({
      username: '',
      password: '',
      timeTimer: undefined,
      time: '',             // 当前时间
      date: '',             // 当前日期
    })

    // 点击登录按钮
    const onSubmit = () => {

    }
    // 点击重置按钮
    const reset = () => {

    }



    // 获取当前时间
    const getTime = () => {
      state.timeTimer = setInterval(() => {
        state.time = dateFormat(new Date(),'hh:mm');
        state.date = dateFormat(new Date(),'yyyy年MM月dd日');
      }, 1000);
    }

    onMounted(()=>{
      getTime()
    })

    onUnmounted(()=>{
      clearInterval(state.timeTimer)
    })

    return{
      ...toRefs(state),
      labelCol: { span: 5 },
      wrapperCol: { span: 24 },
      onSubmit,
      reset
    }
  }
})
</script>

<style lang="less" scoped>
.register{
  width: 100%;
  height: 100%;

  .content{
    height: 100%;
    background: url("../../assets/img/login/bg.jpg");

    .box{
      width: 40%;
      height: 400px;
      background: #2c3e50;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);


      .list {
        width: 100%;
        height: 86%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left{
          width: 50%;
          height: 100%;
          //background: #42b983;

          .time{
            font-size: 22px;
            color: #fff;
            height: 20%;
            padding-top: 10px;
          }

          img{
            width: 100%;
            height: 80%;
          }
        }

        .right{
          width: 50%;
          height: 100%;
          background: beige;
          padding: 0 15px;
          .form{
            position: relative;
            top: 50%;
            transform: translateY(-50%);
          }

        }
      }

      .bottom {
        text-align: center;
        color: #fff;
        padding-top: 10px;
      }

    }


  }
}
</style>